﻿<Page
    x:Class="CoachingOrganizer.WinPhone.Pages.Tools.EmotionsPack.EmotionsPackPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CoachingOrganizer.WinPhone.Pages.Tools.EmotionsPack"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <CollectionViewSource x:Key="emotionNames" Source="{Binding EmotionNames}" IsSourceGrouped="True"/>
    </Page.Resources>
    <Grid x:Name="LayoutRoot">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Title Panel -->
        <StackPanel Grid.Row="0" Margin="19,0,0,0">
            <TextBlock x:Uid="ApplicationTitle" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
            <TextBlock Text="" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->
        <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
            <FlipView>
                <FlipViewItem>
                    <Grid>
                        <ListView ItemsSource="{Binding Source={StaticResource emotionNames}}" SelectedItem="{Binding TracedEmotionName, Mode=TwoWay}">
                            <ListView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Key}"/>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>
                            </ListView.GroupStyle>
                        </ListView>
                    </Grid>
                </FlipViewItem>
                <FlipViewItem>
                    <StackPanel>
                        <TextBlock Text="{Binding TracedEmotionName}"/>
                        <ComboBox/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBox Text="{Binding NewTraceItemName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
                            <Button Grid.Column="1" Command="{Binding SaveEmotionTraceCommand}"/>
                        </Grid>
                        <CaptureElement Name="_traceEmotionCaptureElement"/>
                    </StackPanel>
                </FlipViewItem>
                <FlipViewItem>
                    <GridView ItemsSource="{Binding TraceItems}">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text=""/>
                                    <TextBlock Grid.Row="1" Text="{Binding TraceItemName}"/>
                                    <Image Width="100" Height="100" Source="{Binding TracePicture}"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                </FlipViewItem>
            </FlipView>
        </Grid>
    </Grid>
</Page>
